<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :label-position="labelPosition">
            <el-row>
              <el-col v-bind="grid">
                <el-form-item label="昵称或手机号：">
                  <el-input
                    v-model="userFrom.keyword"
                    placeholder="请输入昵称或手机号"
                    clearable
                    class="selWidth"
                  />
                </el-form-item>
              </el-col>
              <!-- <el-col v-bind="grid">
                        <el-form-item label="姓名：">
                        <el-input v-model="userFrom.name" placeholder="请输入姓名" clearable class="selWidth" />
                        </el-form-item>
              </el-col>-->
              <!-- <el-col v-bind="grid">
                        <el-form-item label="授权类型：">
                            <el-select v-model="userFrom.type" placeholder="请选择">
                                <el-option key="H5" label="H5" value="H5"></el-option>
                                <el-option key="PC" label="PC" value="PC"></el-option>
                                <el-option key="小程序" label="小程序" value="小程序"></el-option>
                            </el-select>
                        </el-form-item>
              </el-col>-->
              <el-col v-bind="grid">
                <el-form-item label="跟进状态：">
                  <el-select v-model="userFrom.follow_up" placeholder="请选择">
                    <el-option key=" " label="全部" value=" "></el-option>
                    <el-option :key="0" label="未跟进" :value="0"></el-option>
                    <el-option :key="1" label="跟进中" :value="1"></el-option>
                    <el-option :key="2" label="已成交" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-bind="grid">
                <el-form-item label="客户状态：">
                  <el-select v-model="userFrom.customer_status" placeholder="请选择">
                    <el-option key=" " label="全部" value=" "></el-option>
                    <el-option :key="0" label="访客" :value="0"></el-option>
                    <el-option :key="1" label="意向客户" :value="1"></el-option>
                    <el-option :key="2" label="成交客户" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- <el-row>
                    <el-col v-bind="grid">
                        <el-form-item label="时间查询：">
                            <el-date-picker
                                v-model="userFrom.time"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
            </el-row>-->
            <el-row>
              <el-col v-bind="grid">
                <el-button
                  type="primary"
                  icon="ios-search"
                  label="default"
                  class="mr15"
                  size="small"
                  @click="userSearchs"
                >搜索</el-button>
                <el-button
                  class="ResetSearch mr10"
                  size="small"
                  type="reset"
                  @click="reset('userFrom')"
                >重置</el-button>
                <el-button
                  type="primary"
                  icon="ios-search"
                  label="default"
                  class="mr15"
                  size="small"
                  @click="exportExcel"
                >导出客户信息</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <el-table :data="tableData.data" style="width: 100%;" size="small" id="educe-table">
        <el-table-column prop="uid" label="ID" min-width="40" />
        <el-table-column label="头像" min-width="80">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 36px; height: 36px"
                :src="scope.row.avatar ? scope.row.avatar : moren"
                :preview-src-list="[scope.row.avatar || moren]"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="昵称" prop="nickname" min-width="100" />
        <el-table-column label="推荐人" prop="spread_name" min-width="100" />
        <el-table-column label="手机号" prop="phone" min-width="100" />
        <el-table-column label="微信号" prop="wechat" min-width="100" />
        <el-table-column label="加入时间" min-width="120" prop="create_time"></el-table-column>
        <el-table-column label="跟进员工" prop="follow_up_uid" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.follow_up_uid ? scope.row.follow_up_name : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="跟进状态" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.follow_up == 0 ? '未跟进' : (scope.row.follow_up == 1 ? '跟进中' : '已成交' )}}</span>
          </template>
        </el-table-column>
        <el-table-column label="意向度（100%）" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.intention || 0 }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="客户状态" prop="email" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.customer_status == 0 ? '访客' : (scope.row.customer_status == 1 ? '意向客户' : '成交客户' )}}</span>
          </template>
        </el-table-column>
        <el-table-column label="成交时间" prop="deal_time" min-width="100" />
        <el-table-column label="备注" prop="mark" min-width="100" />
        <el-table-column label="操作" min-width="100">
          <template slot-scope="scope">
            <div>
              <!-- <el-button type="text" size="small" @click="onDetails(scope.row)">详情</el-button> -->
              <el-button type="text" size="small" @click="onEdit(scope.row)">编辑资料</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="userFrom.limit"
          :current-page="userFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
      <!--会员详情-->
    </el-card>
  </div>
</template>
  
  <script>
import { getClientList, editCard } from "@/api/buss";
import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
  name: "UserList",
  data() {
    return {
      // 失败图片
      moren: require("@/assets/images/f.png"),
      // 展示数据
      tableData: {
        data: [],
        total: 0
      },
      // 详情弹窗显示条件
      visibleDetail: false,
      row: "",
      labelPosition: "right",
      userFrom: {
        keyword: "",
        follow_up: "",
        customer_status: "",
        //type:"",
        time: "",
        page: 1,
        limit: 20
      },
      grid: {
        xl: 8,
        lg: 6,
        md: 12,
        sm: 24,
        xs: 24
      },
      uid: "",
      row: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  mounted() {
    // 获取名片列表
    this.userList();
  },
  filters: {
    // 处理到期时间
    tiem: function(createTime) {
      var date = new Date(createTime * 1000);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      return year + "年" + month + "月" + day + "日";
    }
  },
  methods: {
    // 导出文件
    exportExcel() {
      // 1.生成Excel工作簿对象
      var wb = XLSX.utils.table_to_book(document.querySelector("#educe-table"));
      // 2.手机号，身份证号等会默认使用科学计数法表示，则需要这样设置
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#educe-table"),
        { raw: true }
      );
      // 获取二进制字符串作为输出
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        book: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          // Blob: 对象表示一个不可变 原始数据的类文件对象,不一定是JS原生格式的数据。
          // File: 基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。
          new Blob([wbout], { type: "appliction/octet-stream" }),
          // 设置导出的文件名称可随意
          "客户信息.xlsx"
        );
      } catch (e) {
        if (typeof console != "undefined") console.log(e, wbout);
      }
      // 返回一个新创建的Blob对象，其内容由参数中给定的数组串联组成。
      return wbout;
    },
    // 点击详情
    onDetails(row) {
      this.row = row;
      this.uid = row.uid;
      this.visibleDetail = true;
    },
    // 编辑资料
    onEdit(row) {
      this.$modalForm(editCard(row.uid, "client")).then(res => {
        this.userList();
      });
    },
    // 获取名片列表
    userList() {
      getClientList(this.userFrom).then(res => {
        if (res.status == 200) {
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.count;
        }
        console.log(this.tableData.data);
      });
    },
    // 搜索
    userSearchs() {
      this.userList();
    },
    // 重置
    reset() {
      this.userFrom = {
        keyword: "",
        page: 1,
        limit: 20
      };
      this.userList(this.userFrom);
    },
    // 更好展示页面
    pageChange(page) {
      this.userFrom.page = page;
      this.userList(this.userFrom);
    },
    // 更换展示数量
    handleSizeChange(val) {
      this.userFrom.limit = val;
      this.userList(this.userFrom);
    }
  }
};
</script>
  
  <style lang="scss" scoped>
.spBlock {
  cursor: pointer;
  display: block;
  padding: 5px 0;
}

.check {
  color: #00a2d4;
}
.selWidth {
  width: 100% !important;
}

.dia {
  /deep/ .el-dialog__body {
    height: 700px !important;
  }
}

.text-right {
  text-align: right;
}

.container {
  min-width: 821px;

  /deep/.el-form-item {
    width: 100%;
  }

  /deep/.el-form-item__content {
    width: 72%;
  }
  /deep/ .el-select {
    width: 100%;
  }
  /deep/ .el-date-editor {
    width: 100%;
  }
}

.vipName {
  color: #dab176;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  font-size: 12px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33.33%;
}

/deep/[type="reset"],
[type="submit"],
button,
html [type="button"] {
  -webkit-appearance: none !important;
}
.box-container {
  overflow: hidden;
}
.box-container .list {
  line-height: 40px;
  display: flex;
  align-items: center;
}

.box-container .list .name {
  display: inline-block;
  width: 100px;
  text-align: right;
  color: #606266;
}
.box-container .list .blue {
  color: #1890ff;
}
//.box-container .list.image {
//  margin-bottom: 40px;
//}
//.box-container .list.image img {
//  position: relative;
//  top: 40px;
//}
</style>
  